<template>
    <h3>当前位置：{{ TITLE.organizations }}</h3>
    <div class="outbox">
        <div :style="{ height: rightHeight }">
            <h4>区域分布</h4>
            <div id="box11"></div>
            <div style="display: flex;justify-content: space-around;padding: 0 60px;">
                <span>数量：{{ pList.total }}家</span>
                <span>覆盖率：88%</span>
            </div>
        </div>
        <div id="box12">
            <h4>分布详情</h4>
            <div class="blank"></div>
            <bTable :label="pList.labels" :table-data="pList.list" :total="pList.total" :is-h="[]" :stripe="true"
                :border="false" :limit="pList.limit" @currentchange="onCurrentchange">
            </bTable>
        </div>
    </div>
</template>
<script setup lang="ts">
import { EDP } from '@b/model/enum';
import { TITLE } from "@b/model/enum";
import { onMounted, ref, watch } from 'vue';
import { Box11 } from "@/components/sub_charts/box1_map";
import bTable from "@/components/public/b_table.vue";
import { Organizations } from "@b/index/organizations";
import { reactive } from "vue";
const pList = reactive(new Organizations())
pList.refresh(1)
const leftHeight = ref(EDP.HEIGHT * 0.6 + 'px')
const rightHeight = ref(EDP.HEIGHT + 'px')
const width = ref(EDP.WIDTH / 2 + 'px')
let scene: Box11 | null = null
watch(() => pList.page_index, () => {
    scene?.setDate(pList.list)
})
onMounted(() => {
    scene = new Box11()
})
const onCurrentchange = (page: number) => {
    pList.refresh(page)
}
</script>
<style scoped>
.outbox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
}

#box11 {
    position: relative;
    width: v-bind(width);
    height: v-bind(leftHeight);
}

#box12 {
    width: v-bind(width);
    height: v-bind(rightHeight);
}
</style>